<template>
  <div>
    <Dialog v-model:visible="props.groupVisible" :style="{ width: '50vw' }" position="top" :modal="true"
      :draggable="false" :show-header="false">

      <div class="flex h-20rem">
        <div class="w-5">
          <div class="p-inputgroup">
            <InputText placeholder="输入用户名" v-model="searchKeyword" />
            <Button icon="pi pi-search" severity="success" @click="handleSearch"/>
          </div>
          <div class="flex flex-column gap-3 mt-3 mb-3 overflow-y-auto h-17rem">
            <div v-for="user of props.friendList" :key="user.userId" class="flex align-items-center">
                <Checkbox v-model="selectedUsers" :inputId="user.userId" name="user" :value="user" />
                <Avatar :image="user.avatar" class="mr-2 ml-2" shape="circle" />
                <label :for="user.userId">{{ user.username }}</label>
            </div>
          </div>
        </div>
        <Divider layout="vertical" />
        <div class="flex-1">
          <div class="h-18rem">
            <div class="mb-4">
              <div class="flex flex-column gap-2">
                <label for="username">群组名称</label>
                <InputText size="small" placeholder="输入群组名" v-model="groupConfig.groupName"/>
              </div>
              <div class="flex flex-column gap-2 mt-2">
                <label for="username">群组头像</label>
                <InputText size="small" placeholder="输入群组头像" v-model="groupConfig.avatar"/>
              </div>
            </div>
            <Avatar v-for="item in selectedUsers" :image="item.avatar" class="mr-2 ml-2"  />
          </div>
          <div class="flex justify-content-end">
            <Button label="No" icon="pi pi-times" @click="handleNo" text />
            <Button label="Yes" icon="pi pi-check" @click="handleYes" autofocus />
          </div>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import type { TUserModel } from '@/stores/typings/chat';
import { Dialog, Button, InputText, Divider, Checkbox, Avatar } from '@/utils/primevue'
import { ref, reactive } from 'vue';
import useChatStore from '@/stores/chat'

const chatStore = useChatStore()
const searchKeyword = ref('')
const groupConfig = reactive({
  groupName: '',
  avatar: ''
})
const selectedUsers = ref<TUserModel[]>([])

type TProps = {
  groupVisible: boolean,
  friendList: TUserModel[]
}
const props = defineProps<TProps>()
const emits = defineEmits(['update:groupVisible'])

const handleSearch = () => {
  console.log('s', selectedUsers)
}

const handleNo = () => {
  emits('update:groupVisible', false)
  selectedUsers.value = []
}

const handleYes = () => {
  console.log('selectedUsers')
  const friendIdList = selectedUsers.value.map(item => item.userId)
  chatStore.addJoinGroup(friendIdList, groupConfig)

  // emits('update:groupVisible', false)
  // selectedUsers.value = []
}
</script>

<style scoped lang="scss">
</style>
